<template>
    <div class="home-page">
        <!-- 顶部导航 -->
       <v-header></v-header> 
       <!-- 课程分类导航 -->
       <ul class="nav">
           <li v-for="item in arrList" :key="item.index">
               <img :src="item.imgUrl" />
               <span>{{item.name}}</span>
           </li>
       </ul>
       <!-- 课程列表 -->
       <v-course :arrayList='array'></v-course>
       <!-- 页脚 -->
       <v-footer></v-footer>
    </div>
</template>
<script>
    import Headers from '@/components/header/'
    import webImg from '@/assets/web.png'
    import move from '@/assets/move.png'
    import app from '@/assets/app.png'
    import data from '@/assets/data.png'
    import bigdata from '@/assets/bigdata.png'
    import course from '@/components/course/'
    import footer from '@/components/footer/'

    import course1 from '@/assets/course1.jpg'
    import course2 from '@/assets/course2.jpg'
    import course3 from '@/assets/course3.jpg'
    import course4 from '@/assets/course4.jpg'
    import course5 from '@/assets/course5.jpg'

export default {
    data(){
        return{
            arrList:[],
            array:[],
            footarray:[]
        }
    },
    mounted(){
        this.arrList = [
            {
                imgUrl: webImg,
                name: '前端开发'
            },
            {
                imgUrl: move,
                name: '后端开发'
            },
            {
                imgUrl: app,
                name: '移动开发'
            },
            {
                imgUrl: data,
                name: '数据库'
            },
            {
                imgUrl: bigdata,
                name: '云计算'
            }
        ];
        this.array = [
            {
                imgUrl: course1,
                title: '实例妙解Sed和awk的秘密',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course2,
                title: 'java定时任务调度工具详解之Quartz',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course3,
                title: '实例妙解Sed和awk的秘密',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course4,
                title: 'java定时任务调度工具详解之Quartz',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course5,
                title: '实例妙解Sed和awk的秘密',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course3,
                title: 'java定时任务调度工具详解之Quartz',
                msg:'中级 . 333人在学'
            },
            {
                imgUrl: course1,
                title: '实例妙解Sed和awk的秘密',
                msg:'中级 . 333人在学'
            }
        ];
    },
    components:{
        'v-header':Headers,
        'v-course':course,
        'v-footer':footer
    }
}
</script>
<style scoped>
    .home-page .nav{
        display: block;
        height: 100px;
        margin-top: 44px;
        background: #f3f5f7;
        overflow-x: scroll;
        white-space: nowrap;
        font-size: 0;
    }
    .nav li{
        width: 88px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
    }
    .nav li img{
        display: block;
        width: 32px;
        margin: 20px auto 12px;
    }


</style>












